<template>
  <transition v-if="false" :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
    <div v-show="showSearch" class="mb-[10px]">
      <el-card shadow="hover">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="支付平台ID" prop="typeId">
            <el-input v-model="queryParams.typeId" placeholder="请输入支付平台ID" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="是否循环收单" prop="isLoop">
            <el-input v-model="queryParams.isLoop" placeholder="请输入是否循环" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="循环收单次数" prop="nextCount">
            <el-input v-model="queryParams.nextCount" placeholder="请输入循环次数" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </transition>

  <el-card shadow="hover">
    <template #header>
      <div class="flex gap-8">
        <span>收款平台</span>
        <span class="text-[red]">(数值越大，优先级越高)</span>
      </div>
    </template>
    <el-col :span="1.5">
      <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
      <el-button plain icon="Refresh" circle @click="getList"></el-button>
    </el-col>
    <el-table v-loading="loading" :data="PayAppTypesList" class="mt-[10px]" @row-click="clickRow">
      <el-table-column label="收款平台" align="center" prop="typeId" show-overflow-tooltip>
        <template #default="{ row }">
          <div>{{ payList.filter((item) => item.typeId == row.typeId)[0]?.name || row.payTypeId }}</div>
        </template>
      </el-table-column>
      <el-table-column label="A端名称" align="center" prop="name" show-overflow-tooltip> </el-table-column>
      <el-table-column label="是否循环" align="center" prop="isLoop">
        <template #default="{ row }">
          <el-tag v-if="row.isLoop == 1" type="primary">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="循环次数" align="center">
        <template #default="{ row }">
          <div>{{ row.isLoop ? row.nextCount : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="金额限制" align="center" prop="goodsType">
        <template #default="{ row }">
          <div v-html="row.pricePlugin"></div>
        </template>
      </el-table-column>

      <el-table-column label="总额度/剩余额度" width="120" align="center">
        <template #default="{ row }">
          <div v-if="row.payChart?.total == 0" class="flex flex-col">
            <span>不限制</span>
          </div>
          <div v-else-if="row.payChart" class="flex flex-col">
            <el-tooltip class="box-item" effect="dark" :content="'总额度：' + row.payChart.totalLimit" placement="top">
              <div class="truncate">USD {{ row.payChart.totalLimit }}</div>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" :content="'剩余额度：' + row.payChart.money" placement="top">
              <div class="truncate">USD {{ row.payChart.money }}</div>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="排序" align="center" prop="nextCount">
        <template #default="{ row }">
          <span>{{ row.sort }}</span>
        </template>
      </el-table-column>

      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip> </el-table-column>

      <el-table-column label="操作" align="center" width="80">
        <template #default="scope">
          <el-tooltip content="修改" placement="top">
            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      :page-sizes="[20, 50, 100, 300]"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />
  </el-card>
  <!-- 添加或修改应用支付类型关联对话框 -->
  <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body>
    <el-form ref="PayAppTypesFormRef" :model="form" :rules="rules" label-width="100" label-position="left">
      <el-form-item label="收款平台" prop="typeId">
        <el-select v-model="form.typeId" :disabled="form.groupId" clearable placeholder="请输入支付平台">
          <el-option v-for="item in payList" :value="item.typeId" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="A端名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入A端名称" />
      </el-form-item>

      <el-form-item label="支付描述" prop="describes">
        <el-input v-model="form.describes" type="textarea" placeholder="请输入支付描述" />
      </el-form-item>

      <el-form-item label="国家验证策略" prop="policyId">
        <el-select v-model="form.policyId" clearable style="width: 100%">
          <el-option v-for="item in payPolicyList" :label="item.name" :value="item.policyId"></el-option>
        </el-select>
      </el-form-item>

      <div>
        <div class="flex items-center mb-3">
          <div class="text-left text-[#606266] font-bold w-[100px]">支付图标</div>
          <el-button icon="Plus" size="small" type="primary" @click="selectPayUrl">选择图标</el-button>
        </div>
        <div v-if="form.logoList?.length" class="p-[15px] bg-[#eee] mb-3 max-h-[500px] overflow-auto">
          <VueDraggable
            v-model="form.logoList"
            animation="150"
            group="people"
            class="flex flex-wrap gap-x-4 gap-y-2"
            ghost-class="ghost"
            @update="onUpdate"
            @add="onAdd"
            @remove="remove"
          >
            <div v-for="item in form.logoList" :key="item.id" class="cursor-move h-[43px] rounded mb-[10px] border-[1px] border-solid border-[#fff]">
              <div class="flex items-center gap-4 px-[10px] h-[100%]">
                <img :src="getImage(item)" alt="" style="border: 1px solid #ccc" class="rounded-[3px]" />
              </div>
            </div>
          </VueDraggable>
        </div>
      </div>

      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="form.sort" placeholder="排序" />
      </el-form-item>
      <el-form-item label="是否循环" prop="isLoop">
        <el-switch v-model="form.isLoop" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item v-if="form.isLoop" label="循环次数" prop="nextCount">
        <el-input-number v-model="form.nextCount" placeholder="循环次数" />
      </el-form-item>

      <el-form-item v-if="form.isLoop" label="防关联" prop="isFixed">
        <el-switch v-model="form.isFixed" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item v-if="form.isFixed" label="防关联类型" prop="fixedType">
        <el-select v-model="form.fixedType">
          <el-option :value="1" label="邮箱"></el-option>
          <el-option :value="2" label="IP地址"></el-option>
        </el-select>
      </el-form-item>

      <div class="flex justify-end mt-[-14px] mb-[10px]">
        <div class="text-[13px] text-[red] leading-[1.2]" style="width: calc(100% - 100px)">
          使用说明：该功能仅限于[收银台模式]，相同邮箱在12小时内提交订单只能使用同一个stripe收款账号进行收款，如果在12小时内收款账户挂了或订单创建失败会循环到下一个收款账户进行12小时的绑定。
        </div>
      </div>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" />
      </el-form-item>
      <el-form-item label="强制修改价格">
        <el-switch v-model="form.priceForce" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="价格插件">
        <div>
          <el-input v-model="form.pricePlugin" type="textarea" />
          <span class="block leading-[1.4] mt-1"
            >自动修改订单价格(单位美元);格式10-130区间正常算 不在这个区间的 超过130的按130算 低于10的按10算。</span
          >
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="payUrlVisible" title="选择支付图标" width="600px" append-to-body>
    <div>
      <el-input v-model="paySearch" style="max-width: 600px" placeholder="Please input" class="w-[100%] mb-[15px]">
        <template #append>
          <el-button icon="Search" @click="changeSearch" />
        </template>
      </el-input>
      <div v-for="item in payUrlList" :key="item.id" class="cursor-pointer h-[43px] rounded mb-[10px] border-[1px] border-solid border-[#eee]">
        <div class="flex items-center gap-4 px-[10px] h-[100%]" @click="item.check = !item.check">
          <el-checkbox v-model="item.check" />
          <img :src="getImage(item.img)" alt="" style="border: 1px solid #ccc" class="rounded-[3px]" />
          <span :class="item.check ? 'text-[var(--el-color-primary)]' : ''">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button @click="cancelPayUrl">取消</el-button>
      <el-button type="primary" @click="submitPayUrl">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup name="PayAppTypes" lang="ts">
import { listPayAppTypes, getPayAppTypes, delPayAppTypes, addPayAppTypes, updatePayAppTypes } from '@/api/pay/PayAppTypes';
import { PayAppTypesVO, PayAppTypesQuery, PayAppTypesForm } from '@/api/pay/PayAppTypes/types';
import { getPayPolicy } from '@/api/pay/PayApp';
import { VueDraggable } from 'vue-draggable-plus';
import { PayChartGroupType } from '@/api/pay/PayAppAccount';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps({
  payList: {
    type: Array,
    default: () => []
  },
  dataInfo: {
    type: Object,
    default: () => {}
  }
});

const PayAppTypesList = ref<PayAppTypesVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const PayAppTypesFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: PayAppTypesForm = {
  id: undefined,
  groupId: undefined,
  typeId: undefined,
  isLoop: 0,
  nextCount: undefined,
  sort: 0,
  fixedType: 1
};
const data = reactive<PageData<PayAppTypesForm, PayAppTypesQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    groupId: undefined,
    typeId: undefined,
    isLoop: undefined,
    nextCount: undefined,
    params: {}
  },
  rules: {
    typeId: [{ required: true, trigger: 'blur', message: '请选择支付平台' }],
    isLoop: [{ required: true, trigger: 'blur', message: '请选择是否循环收单' }],
    nextCount: [{ required: true, trigger: 'blur', message: '请设置收单几次进入循环' }],
    sort: [{ required: true, trigger: 'blur', message: '请设置排序' }],
    name: [{ required: true, trigger: 'blur', message: '请设置A端名称' }],
    fixedType: [{ required: true, trigger: 'blur', message: '请设置防关联类型' }]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询应用支付类型关联列表 */
const getList = async () => {
  PayAppTypesList.value = [];
  loading.value = true;
  queryParams.value.groupId = props.dataInfo.groupId;
  const res = await listPayAppTypes(queryParams.value);
  let data = res.rows.map((item) => {
    item.pricePlugin = item?.pricePlugin?.replace(/\n/g, '<br>');
    return item;
  });
  total.value = res.total;
  if (res.total > 0) {
    getPayChartList(data);
  } else {
    loading.value = false;
    PayAppTypesList.value = [];
  }
};

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  PayAppTypesFormRef.value?.resetFields();
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

/** 多选框选中数据 */
const handleSelectionChange = (selection: PayAppTypesVO[]) => {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = '添加收款平台';
};

/** 修改按钮操作 */
const handleUpdate = async (row?: PayAppTypesVO) => {
  reset();
  const _id = row?.id || ids.value[0];
  const res = await getPayAppTypes(_id);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = '修改收款平台';
  if (form.value.logo) {
    form.value.logoList = form.value.logo.split(',').map((item) => {
      let img = item.split('/');
      let str = img[img.length - 1];
      item = str;
      return item;
    });
  }
};

// 校验并解析规则（支持小数）
function parsePriceRules(input) {
  if (input.includes('\n')) {
    return false;
  }
  const rules = input.split('\n').map((rule) => rule.trim());
  const validRules = [];
  const isTrue = false;
  for (const rule of rules) {
    const match = rule.match(/^(\d+(\.\d+)?)-(\d+(\.\d+)?)$/);
    if (match) {
      const min = parseFloat(match[1]);
      const max = parseFloat(match[3]);
      if (min < max) {
        validRules.push({ min, max });
      } else {
        console.error(`规则无效: ${rule} (最小值应小于最大值)`);
      }
    } else {
      console.error(`规则格式错误: ${rule}`);
    }
  }

  return validRules.length == rules.length;
}

/** 提交按钮 */
const submitForm = () => {
  PayAppTypesFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      if (form.value.logoList?.length) {
        form.value.logo = form.value.logoList.map((item) => location.origin + '/card/' + item).join(',');
      } else {
        form.value.logo = '';
      }
      form.value.groupId = props.dataInfo.groupId;
      if (form.value.pricePlugin) {
        if (!parsePriceRules(form.value.pricePlugin)) {
          ElMessage.error('价格插件格式错误！请检查后重新提交');
          return false;
        }
      }
      buttonLoading.value = true;
      if (form.value.id) {
        await updatePayAppTypes(form.value).finally(() => (buttonLoading.value = false));
      } else {
        await addPayAppTypes(form.value).finally(() => (buttonLoading.value = false));
      }
      proxy?.$modal.msgSuccess('操作成功');
      dialog.visible = false;
      await getList();
    }
  });
};

/** 删除按钮操作 */
const handleDelete = async (row?: PayAppTypesVO) => {
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除 ' + row.name + ' 收款平台').finally(() => (loading.value = false));
  await delPayAppTypes(_ids);
  proxy?.$modal.msgSuccess('删除成功');
  await getList();
};

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download(
    'system/PayGroupType/export',
    {
      ...queryParams.value
    },
    `PayAppTypes_${new Date().getTime()}.xlsx`
  );
};

const emits = defineEmits(['viewInfo']);
const viewInfo = (row) => {
  emits('viewInfo', row);
};
const clickRow = (row, column) => {
  if (column?.label != '操作') {
    emits('viewInfo', row);
  }
};

const payUrlVisible = ref(false);
const paySearch = ref('');
const selectPayUrl = () => {
  if (form.value.logoList) {
    payImg.value.map((item2) => {
      if (form.value.logoList.some((item) => item === item2.img)) {
        item2.check = true;
        return item2;
      }
      return item2;
    });
  }
  payUrlVisible.value = true;
};
const changeSearch = () => {};
const submitPayUrl = () => {
  form.value.logoList = payImg.value.filter((item) => item.check).map((item) => item.img);
  cancelPayUrl();
};
const cancelPayUrl = () => {
  payImg.value.map((item) => {
    item.check = false;
  });
  payUrlVisible.value = false;
};
const payUrlList = computed(() => {
  return payImg.value.filter((item) => item.name.includes(paySearch.value.toUpperCase()));
});
const payImg = ref([
  { 'name': 'ALIPAY', 'img': 'alipay.svg', 'check': false },
  { 'name': 'ALIPAYHK', 'img': 'alipayhk.svg', 'check': false },
  { 'name': 'AMERICAN_EXPRESS', 'img': 'american_express.svg', 'check': false },
  { 'name': 'BC', 'img': 'bc.svg', 'check': false },
  { 'name': 'BITCOIN', 'img': 'bitcoin.svg', 'check': false },
  { 'name': 'BITCOIN_CASH', 'img': 'bitcoin_cash.svg', 'check': false },
  { 'name': 'BOLETO', 'img': 'boleto.svg', 'check': false },
  { 'name': 'CITADELE', 'img': 'citadele.svg', 'check': false },
  { 'name': 'COOP', 'img': 'coop.svg', 'check': false },
  { 'name': 'DAI', 'img': 'dai.svg', 'check': false },
  { 'name': 'DANSKE_BANK', 'img': 'danske_bank.svg', 'check': false },
  { 'name': 'DINERS_CLUB', 'img': 'diners_club.svg', 'check': false },
  { 'name': 'DISCOVER', 'img': 'discover.svg', 'check': false },
  { 'name': 'DOGECOIN', 'img': 'dogecoin.svg', 'check': false },
  { 'name': 'ELO', 'img': 'elo.svg', 'check': false },
  { 'name': 'ETHEREUM', 'img': 'ethereum.svg', 'check': false },
  { 'name': 'FAMILYMART', 'img': 'familymart.svg', 'check': false },
  { 'name': 'FPS', 'img': 'fps.svg', 'check': false },
  { 'name': 'FPX', 'img': 'fpx.svg', 'check': false },
  { 'name': 'GCASH', 'img': 'gcash.svg', 'check': false },
  { 'name': 'GIROPAY', 'img': 'giropay.svg', 'check': false },
  { 'name': 'HANA', 'img': 'hana.svg', 'check': false },
  { 'name': 'HYPERCARD', 'img': 'hypercard.svg', 'check': false },
  { 'name': 'HYUNDAI', 'img': 'hyundai.svg', 'check': false },
  { 'name': 'IDEAL', 'img': 'ideal.svg', 'check': false },
  { 'name': 'ING_HOMEPAY', 'img': 'ing_homepay.svg', 'check': false },
  { 'name': 'JCB', 'img': 'jcb.svg', 'check': false },
  { 'name': 'KAKAO_PAY', 'img': 'kakao_pay.svg', 'check': false },
  { 'name': 'KB', 'img': 'kb.svg', 'check': false },
  { 'name': 'KREDIIDIPANK', 'img': 'krediidipank.svg', 'check': false },
  { 'name': 'LAWSON', 'img': 'lawson.svg', 'check': false },
  { 'name': 'LHV', 'img': 'lhv.svg', 'check': false },
  { 'name': 'LITECOIN', 'img': 'litecoin.svg', 'check': false },
  { 'name': 'LOTTE', 'img': 'lotte.svg', 'check': false },
  { 'name': 'LUMINOR', 'img': 'luminor.svg', 'check': false },
  { 'name': 'MAESTRO', 'img': 'maestro.svg', 'check': false },
  { 'name': 'MASTERCARD', 'img': 'mastercard.svg', 'check': false },
  { 'name': 'MINISTOP', 'img': 'ministop.svg', 'check': false },
  { 'name': 'NH', 'img': 'nh.svg', 'check': false },
  { 'name': 'PAGOEFECTIVO', 'img': 'pagoefectivo.svg', 'check': false },
  { 'name': 'PAYCO', 'img': 'payco.svg', 'check': false },
  { 'name': 'PAYME', 'img': 'payme.svg', 'check': false },
  { 'name': 'PAYPAL', 'img': 'paypal.svg', 'check': false },
  { 'name': 'PAYSAFECARD', 'img': 'paysafecard.svg', 'check': false },
  { 'name': 'PAYSERA', 'img': 'paysera.svg', 'check': false },
  { 'name': 'PAYTM', 'img': 'paytm.svg', 'check': false },
  { 'name': 'PRZELEW24', 'img': 'przelew24.svg', 'check': false },
  { 'name': 'QR_PROMPTPAY', 'img': 'qr_promptpay.svg', 'check': false },
  { 'name': 'RABBIT_LINE_PAY', 'img': 'rabbit_line_pay.svg', 'check': false },
  { 'name': 'RUPAY', 'img': 'rupay.svg', 'check': false },
  { 'name': 'SAMSUNG', 'img': 'samsung.svg', 'check': false },
  { 'name': 'SANTANDER', 'img': 'santander.svg', 'check': false },
  { 'name': 'SEB', 'img': 'seb.svg', 'check': false },
  { 'name': 'SHINHAN', 'img': 'shinhan.svg', 'check': false },
  { 'name': 'SHOPEEPAY', 'img': 'shopeepay.svg', 'check': false },
  { 'name': 'SWEDBANK', 'img': 'swedbank.svg', 'check': false },
  { 'name': 'TOSS', 'img': 'toss.svg', 'check': false },
  { 'name': 'TRUSTLY', 'img': 'trustly.svg', 'check': false },
  { 'name': 'UNIONPAY', 'img': 'unionpay.svg', 'check': false },
  { 'name': 'USDC', 'img': 'usdc.svg', 'check': false },
  { 'name': 'VISA', 'img': 'visa.svg', 'check': false },
  { 'name': 'WECHATPAY', 'img': 'wechatpay.svg', 'check': false },
  { 'name': 'PIX', 'img': 'pix.svg', 'check': false },
  { 'name': 'APPLE_PAY', 'img': 'apple_pay.svg', 'check': false },
  { 'name': 'USDT', 'img': 'usdt.svg', 'check': false },
  { 'name': 'TUSD', 'img': 'tusd.svg', 'check': false },
  { 'name': 'BUSD', 'img': 'busd.svg', 'check': false },
  { 'name': 'BPI', 'img': 'bpi.svg', 'check': false },
  { 'name': 'RBL', 'img': 'rbl.svg', 'check': false },
  { 'name': 'TM', 'img': 'tm.svg', 'check': false },
  { 'name': 'CASHAPP', 'img': 'cashapp.svg', 'check': false },
  { 'name': 'ZELLE', 'img': 'zelle.svg', 'check': false },
  { 'name': 'KLARNA', 'img': 'klarna.svg', 'check': false },
  { 'name': 'SOFORT', 'img': 'sofort.svg', 'check': false },
  { 'name': 'SEPA', 'img': 'sepa.svg', 'check': false },
  { 'name': 'GOOGLEPAY', 'img': 'googlepay.svg', 'check': false },
  { 'name': 'VENMO', 'img': 'venmo.svg', 'check': false },
  { 'name': 'AME', 'img': 'ame.svg', 'check': false },
  { 'name': 'PICPAY', 'img': 'picpay.svg', 'check': false },
  { 'name': 'LOTTERY', 'img': 'lottery.svg', 'check': false },
  { 'name': 'DEPOSITEXPRESS', 'img': 'depositexpress.svg', 'check': false },
  { 'name': 'CODI', 'img': 'codi.svg', 'check': false },
  { 'name': 'CASH', 'img': 'cash.svg', 'check': false },
  { 'name': 'TODITO', 'img': 'todito.svg', 'check': false },
  { 'name': 'SPEI', 'img': 'spei.svg', 'check': false },
  { 'name': 'OXXOPAY', 'img': 'oxxopay.svg', 'check': false },
  { 'name': 'ZIP', 'img': 'zip.svg', 'check': false },
  { 'name': 'AFTERPAY', 'img': 'afterpay.svg', 'check': false },
  { 'name': 'EPS', 'img': 'eps.svg', 'check': false },
  { 'name': 'BANCONTACT', 'img': 'bancontact.svg', 'check': false },
  { 'name': 'OXXO', 'img': 'oxxo.svg', 'check': false },
  { 'name': 'UPIPAY', 'img': 'upipay.svg', 'check': false },
  { 'name': 'TRUELAYER', 'img': 'truelayer.svg', 'check': false },
  { 'name': 'BANK_TRANSFER', 'img': 'bank_transfer.svg', 'check': false },
  { 'name': 'EFTPOS', 'img': 'eftpos.svg', 'check': false },
  { 'name': 'PSE', 'img': 'pse.svg', 'check': false },
  { 'name': 'BLIK', 'img': 'blik.svg', 'check': false },
  { 'name': 'AKULAKU', 'img': 'akulaku.svg', 'check': false },
  { 'name': 'BOOST', 'img': 'boost.svg', 'check': false },
  { 'name': 'DANA', 'img': 'dana.svg', 'check': false },
  { 'name': 'GRABPAY', 'img': 'grabpay.svg', 'check': false },
  { 'name': 'TOUCHGO', 'img': 'touchgo.svg', 'check': false },
  { 'name': 'TRUEMONEYWALLET', 'img': 'truemoneywallet.svg', 'check': false },
  { 'name': 'UPI', 'img': 'upi.svg', 'check': false },
  { 'name': 'EBANX', 'img': 'ebanx.svg', 'check': false },
  { 'name': 'DLOCAL', 'img': 'dlocal.svg', 'check': false },
  { 'name': 'PAYU', 'img': 'payu.svg', 'check': false },
  { 'name': 'PRZELEWY', 'img': 'przelewy.svg', 'check': false },
  { 'name': 'SKRILL', 'img': 'skrill.svg', 'check': false },
  { 'name': 'KCHEK', 'img': 'kchek.svg', 'check': false },
  { 'name': 'KHIPU', 'img': 'khipu.svg', 'check': false },
  { 'name': 'MACH', 'img': 'mach.svg', 'check': false },
  { 'name': 'PAGO46', 'img': 'pago46.svg', 'check': false },
  { 'name': 'MYBANK', 'img': 'mybank.svg', 'check': false },
  { 'name': 'SEVENELEVEN', 'img': 'seveneleven.svg', 'check': false },
  { 'name': 'HILIFE', 'img': 'hilife.svg', 'check': false },
  { 'name': 'OK', 'img': 'ok.svg', 'check': false },
  { 'name': 'YAMATO', 'img': 'yamato.svg', 'check': false },
  { 'name': 'E_TRANSFER', 'img': 'e_transfer.svg', 'check': false },
  { 'name': 'MONEYGRAM', 'img': 'moneygram.svg', 'check': false },
  { 'name': 'REMITLY', 'img': 'remitly.svg', 'check': false },
  { 'name': 'WESTERNUNION', 'img': 'westernunion.svg', 'check': false },
  { 'name': 'WIRE', 'img': 'wire.svg', 'check': false },
  { 'name': 'WISE', 'img': 'wise.svg', 'check': false },
  { 'name': 'STRIPE', 'img': 'stripe.svg', 'check': false },
  { 'name': 'LINK', 'img': 'link.svg', 'check': false },
  { 'name': 'SATISPAY', 'img': 'satispay.svg', 'check': false }
]);

const getImage = (val) => {
  return `/card/${val}`;
};
function onUpdate() {
  console.log('update');
}
function onAdd() {
  console.log('add');
}
function remove() {
  console.log('remove');
}

const payPolicyList = ref([]);
const getPayPolicyList = () => {
  getPayPolicy({ type: 2 }).then((res) => {
    payPolicyList.value = res.data;
  });
};

const getPayChartList = async (data) => {
  let res = await PayChartGroupType(props.dataInfo.groupId);
  data.map((item) => {
    item.payChart = res.data.find((item2) => item2.groupTypeId == item.id);
    return item;
  });
  PayAppTypesList.value = data;
  loading.value = false;
};

onMounted(() => {
  getList();
  getPayPolicyList();
});
</script>

<style lang="scss" scoped>
.el-card {
  min-height: 100%;
  position: relative;
  padding-bottom: 40px;
}
.pagination-container {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
}
</style>
